{% extends "orgs/base.html" %}

{% load i18n %}
{% load pagination_tags %}
{% load order_by %}
{% load humanize %}
{% load org_tags %}

{% block head_title %}Meetings for {{ org.name }}{% endblock %}
{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{{ MEDIA_URL }}jquery-ui-themeroller.css" type="text/css" media="screen" />
{% endblock %}

{% block body %}
    <h1>{% trans "Meetings for " %} <a href="{% url organization org_slug=org.slug %}">{{ org.name }}</a></h1>
    
    {% if is_officer %}
		<div class="form-toggle">
			<h2><a href=""  id="add-meeting-toggle">{% trans "Add Meeting" %}</a></h2>
			<form id="add-meeting" action="{% url org_meetings org.slug %}" method="POST" style="display: none;" >
				<table>
					{{ meeting_form }}
					<tr><td></td>
						<td>
							<input type="hidden" name="action" value="add_meeting" />
							<input class="submit-btn" type="submit" value="{% trans 'add meeting' %}"/> 
						</td>
					</tr>
				</table>
			</form>
		</div>
    {% endif %}

	<h4>Upcoming meetings:</h4>

	{% if upcoming_meetings %}

		<table class="bordered-table" >
			<tr>
				<th>Details</th>
				<th>Date and Time</th>
				<th>Name</th>
				<th>Location</th>
			</tr>    
			{% for meeting in upcoming_meetings %}
				<tr class="{% cycle odd,even %}">
					<td><a href="{% url meeting_details meeting_slug=meeting.slug %}">View</a></td>
					<td>{{ meeting.date_and_time.date|date:"l, d M, Y" }} at {{ meeting.date_and_time.time|time:"P" }}</td>
					<td>{{ meeting.get_name_display }}</td>
					<td>{{ meeting.location }}</td>
					
					{% comment %}
					{% if is_officer %}
						<td>
							<form action="{% url announce_meeting meeting_slug=meeting.slug %}" method="POST">
								<input class="submit-btn" type="submit" value="Announce" />
								<input type="hidden" name="next" value="{% url org_meetings org.slug %}" />
							</form>
						</td>
					{% endif %}
					{% endcomment %}
					
				</tr>
			{% endfor %}
		</table>
	
	{% else %}
		No upcoming meetings.
	{% endif %}

	<h4>Recent meetings:</h4>

	{% if recent_meetings %}

		<table class="bordered-table" >
			<tr>
				<th>Details</th>
				<th>Date and Time</th>
				<th>Name</th>
				<th>Location</th>
				{% comment %}
				{% if is_secretary %}
					<th>Attendance</th>
				{% endif %}
				{% endcomment %}
			</tr>    
			{% for meeting in recent_meetings %}
				<tr class="{% cycle odd,even %}">
					<td><a href="{% url meeting_details meeting_slug=meeting.slug %}">View</a></td>
					<td>{{ meeting.date_and_time.date|date:"l, d M, Y" }} at {{ meeting.date_and_time.time|time:"P" }}</td>
					<td>{{ meeting.name }}</td>
					<td>{{ meeting.location }}</td>
					{% comment %}
					{% if is_secretary %}
						<td>
							<a href="{% url meeting_attendance meeting_slug=meeting.slug %}">View</a> 
							<a href="{% url update_attendance meeting_slug=meeting.slug %}">Update</a>
						</td>
					{% endif %}
					{% endcomment %}
				</tr>
			{% endfor %}
		</table>
	
	{% else %}
		No past meetings.
	{% endif %}

{% endblock %}

{% block extra_body %}
	{{ block.super }}
	<script type="text/javascript" src="{{ MEDIA_URL }}jquery-ui-datepicker.js"></script>
    <script type="text/javascript">
		
		var originalTime = ""
		
        $(document).ready(function() {
            $('#add-meeting').hide();
            $('#add-meeting-toggle').click(function() {
                $('#add-meeting').slideToggle();
                $('#add-meeting').autoscroll();
                return false;
            });
            if ($('#add-meeting ul.errorlist').length) {
                $('#add-meeting').show();
                $('#add-meeting ul.errorlist').autoscroll();
            };
			$("#id_date_and_time_0").datepicker({dateFormat: $.datepicker.ATOM});
			$("#id_date_and_time_1").blur(validateTime);
			originalTime = $("#id_date_and_time_1").attr("value");
        });
		
		function validateTime(event) {
			var candidate = event.target.value;
			var RegExPattern = /^\d{1,2}[:]\d{2}$/;
			var valid = true;
			if (!candidate.match(RegExPattern)) 
			{ 
				var values = candidate.split(":");
				if (values.length == 1)
				{
					var RegExPattern = /^\d{1,2}$/;
					if (candidate.match(RegExPattern))
					{
						if ( (parseFloat(values[0]) > 0) && (parseFloat(values[0]) < 13) )
						{
							event.target.value = values[0] + ":00";
							return;
						}
						else { valid = false; }
					} 
					else { valid = false; }								
				}
				else { valid = false; }
			}
			if (valid)
			{
				var values = candidate.split(":");
				if ( (parseFloat(values[0]) < 1) || (parseFloat(values[0]) > 12) ) { valid = false; }
				if (valid)
				{

					if ( (parseFloat(values[1]) < 0) || (parseFloat(values[1]) > 59) ) { valid = false; }
				}
			}
			if (!valid)
			{
				$("#id_date_and_time_1").fadeIn("slow", function () {
					event.target.style.color = "red";
					event.target.value = "invalid time";
					$("#id_date_and_time_1").fadeOut(1500, function () {
						event.target.style.color = "black";
						event.target.value = originalTime;
						$("#id_date_and_time_1").fadeIn("slow", function () {
							event.target.style.color = "black";
							event.target.value = originalTime;
						  });
					});			
				});
			}
		}
		
    </script>
{% endblock %}
